<template>
    <div>
        <el-input v-model="username" placeholder="请输入用户名" clearable></el-input>
        <el-input v-model="passowrd" placeholder="请输入密码" show-password clearable></el-input>
        <el-button type="primary" @click="login">登陆</el-button>
    </div>
</template>
<script>
import httpGet from '@/utils/http-util.js'
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'

export default {
    name: 'login',
    data() {
        return {
            username: 'panda',
            passowrd: ''
        }
    },
    mounted() {
      // 第一种写法
      console.log('第一种写法 name:' + this.$store.state.name)
      console.log('第一种写法 number:' + this.$store.state.number)
      // 第二种写法
      console.log('第二种写法 name:' + this.name)
      console.log('第二种写法 number:' + this.number)
      // 第三种写法
      console.log('第三种写法 name:' + this.getName)
      console.log('第三种写法 number:' + this.getNumber)

    //   this.$store.commit('setName', { name: '李四' });
    //   this.$store.commit('setNumber', { number: 666 });
        this.setNumber({number: 10})
        this.setName({name: '李四'})

      console.log('第三种写法1 name:' + this.getName)
      console.log('第三种写法1 number:' + this.getNumber)

      setTimeout(() => {
        console.log('第四种写法 name:' + this.getName)
        console.log('第四种写法 number:' + this.getNumber)
      }, 2000)
    },
    methods: {
        login() {
            console.log('login username: ' + this.username + ', pwd: ' + this.passowrd)
            sessionStorage.setItem('username', this.username)
            // httpGet('/api')
            httpGet('/api/user/get/1')
            this.$router.push({path: '/dashboard/dashboard1'})
        },
        // 注意mutations放在methods中
        // ...mapMutations(['setName', 'setNumber']),
        ...mapActions(['setName', 'setNumber'])
        // 以上方法有冲突，但是不会报错，避免的方式就是用不同的名字
    },
    computed: {
        // 第二种写法
        ...mapState(['name', 'number']),
        // 第三种写法
        ...mapGetters(['getName', 'getNumber'])    
    }
}
</script>
<style scoped>
.el-input {
    width: 200px;
}
</style>